import React from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import { useState, useEffect, useRef } from 'react'
import Img1 from "./log.svg"
import Img2 from "./register.svg"
import "./index.scss"
import SignUp from "../../components/SignUp"
import SignIn from "../../components/SignIn"


export default () => {
  const [containerClass, setcontainerClass] = useState("container")
  const addClass = () => {
    setcontainerClass("container sign-up-mode")
  }
  const removeClass = () => {
    setcontainerClass("container")
  }
  return (
    <div className="loginPage">
      <div className={containerClass} >
        <div className="form-warp ">
          <SignIn></SignIn>
          <SignUp></SignUp>
        </div>
        <div className="desc-warp">
          <div className="desc-warp-item sign-up-desc">
            <div className="content">
              <Button id="sign-up-btn" type="primary" shape="round" size="large" style={{ color: 'white', border: "2px solid white", width: "120px" }} onClick={addClass}>注册</Button>
            </div>
            <img src={Img1} alt="" />
          </div>
          <div className="desc-warp-item sign-in-desc">
            <div className="content">
              <Button id="sign-in-btn" type="primary" shape="round" size="large" style={{ color: 'white', border: "2px solid white", width: "120px" }} onClick={removeClass}>登录</Button>
            </div>
            <img src={Img2} alt="" />
          </div>
        </div>
      </div>
    </div >
  )
}